<template>
  <div class="room-people">
    <div class="select-input-wrap">
      <select-input-group
        ref="SelectInputGroup"
        :options="typeOptions"
        select-width="38%"
        input-width="62%"
        placeholder="全局搜索人员..."
        @clear="onClear"
        @search="onSearch"
      />
    </div>
    <div class="block-title">
      人员列表(共<span>{{ peopleList.length }}</span
      >人)
    </div>
    <div v-if="peopleList.length" class="room-people-row">
      <div v-for="item of peopleList" :key="item.people_id" class="room-people-col">
        <div class="room-people-box" style="cursor: pointer" @click="details(item)">
          <avatar
            class="room-people-avatar"
            :rate="98 / 64"
            :src="item.head_img_url"
            :encryptConfirmed="true"
            style="margin-top: 3px"
          />
          <descriptions :columns="columns" :data-source="item" :col-span="24" />
        </div>
        <div v-if="item.type_name_arr && item.type_name_arr.length" class="people-badge">
          <div class="people-badge-name" v-for="(typeName, index) of item.type_name_arr" :key="index">
            {{ typeName }}
          </div>
        </div>
        <span class="details" :style="{ color: item.is_live == 1 ? '#20d8b5' : '#fc6820' }">{{
          item.is_live == 1 ? '常住' : '不常住'
        }}</span>
        <a-button v-if="showLocateBtn(item)" size="small" class="locate" @click="locate(item)">
          <a-icon type="home" />
        </a-button>
      </div>
      <div v-if="showLoadMore" class="load-more" @click="loadMore">加载更多...</div>
    </div>
    <empty v-else />
  </div>
</template>

<script>
import Empty from '@gis/lib/components/Empty/index.vue';
import Avatar from '@gis/lib/components/img-viewer/index.vue';
import SelectInputGroup from '@gis/lib/components/select-input-group/index.vue';
import { getEnumText } from '@gis/lib/enums/index.js';
import { houseCurrentPeople } from '@gis/lib/api';
import { openPeopleDetailsDialog } from '../../../../reality-people/people-details/peopleDetailsDialog.js';

const typeOptions = [
  { label: '姓名', value: 'name' },
  { label: '电话', value: 'phone' },
  { label: '身份证', value: 'id_card' },
];

export default {
  name: 'room-people',
  components: { SelectInputGroup, Avatar, Empty },
  props: {
    roomId: { type: String, default: '' },
  },
  data() {
    return {
      typeOptions,
      roomPeopleList: [],
      peopleList: [],
      page_number: 1,
      showLoadMore: false,
      columns: [
        { label: '姓名', key: 'name' },
        { label: '性别', key: 'sex', colSpan: 12, format: (v) => getEnumText('gender', v) },
        { label: '年龄', key: 'age', colSpan: 12 },
        { label: '电话', key: 'phone', wrapperStyle: { letterSpacing: '0.1em' } },
        { label: '户主关系', key: 'relation' },
        { label: '数据来源', key: 'is_temp', format: (v) => (v == 1 ? '省厅' : '自采') },
      ],
    };
  },
  watch: {
    roomId: {
      immediate: true,
      handler() {
        this.getRoomPeopleList().then(() => {
          if (this.$refs.SelectInputGroup) {
            this.$refs.SelectInputGroup.clear();
          }
        });
      },
    },
  },
  methods: {
    getSex(v) {
      return getEnumText('gender', v);
    },
    onClear() {
      this.peopleList = this.roomPeopleList;
      this.showLoadMore = false;
      this.params = null;
    },
    async onSearch(params) {
      this.params = params;
      this.page_number = 1;
      this.peopleList = await this.getGlobalPeopleList();
      // this.$loading.closeAll();
    },
    async loadMore() {
      this.page_number++;
      const list = await this.getGlobalPeopleList();
      this.peopleList = [].concat([], this.peopleList, list);
      // this.$loading.closeAll();
    },
    async getGlobalPeopleList() {
      // this.$loading.open();
      const res = await this.$axios.get('/xw-microservice/xw-analysis/v3/people_info/search', {
        params: { ...this.params, page_number: this.page_number },
      });
      const data = res ? res.data || {} : {};
      this.showLoadMore = this.page_number * 10 < data.count;
      return data.list || [];
    },
    async getRoomPeopleList() {
      const params = { room_id: this.roomId, page_size: 9999, is_gis: 1 };
      if (!params.room_id) {
        this.roomPeopleList = [];
        return;
      }
      // this.$loading.open();
      const res = await houseCurrentPeople(params);
      if (res && res.code === 200) {
        const data = res.data || {};
        const list = data.list || [];
        this.roomPeopleList = list.reduce((res, item) => {
          if (item.type_name) {
            return res.concat(
              Object.assign({}, item, {
                type_name_arr: item.type_name.split(','),
              })
            );
          } else {
            return res.concat(
              Object.assign({}, item, {
                type_name_arr: [],
              })
            );
          }
        }, []);
      } else {
        console.error('请求房屋人员列表失败：' + res.msg);
      }
      // this.$loading.closeAll();
    },
    details(data) {
      openPeopleDetailsDialog(data);
    },
    locate(data) {
      this.$emit('onLocate', {
        yard_id: data.yard_id,
        building_id: data.building_id,
        cell_id: data.cell_id,
        room_id: data.room_id,
      });
    },
    showLocateBtn(data) {
      return data && data.yard_id && data.building_id && data.cell_id && data.room_id;
    },
  },
};
</script>

<style lang="less">
.room-people {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .select-input-wrap {
    flex: none;
    margin: 0;
    padding: 9px 10px 8px;
    border-bottom: 1px solid rgba(47, 171, 255, 0.1);
  }
  .block-title {
    flex: none;
    padding: 14px 15px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    span {
      color: rgb(32, 216, 181);
      margin: 0 3px;
    }
  }
  .room-people-row {
    flex: auto;
    height: 0;
    min-height: 0;
    padding: 0 8px;
    overflow: hidden auto;
    .room-people-col {
      position: relative;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }
  .room-people-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .room-people-avatar {
    flex: none;
    width: 70px;
    height: 104px;
    margin-right: 10px;
    padding: 3px;
  }
  .room-people-info {
    flex: auto;
    width: 0;
    min-width: 0;
    padding-left: 10px;
    & .text-row-tight {
      line-height: 1.25;
    }
  }
  .details {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1;
    border: none;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
  }
  .badge {
    position: absolute;
    right: 3px;
    top: 0;
    line-height: 1;
    color: #40a9ff;
    border: none;
    font-size: 12px;
    font-weight: 400;
    cursor: default;
  }
  .locate {
    position: absolute;
    right: 3px;
    top: 28px;
    border: none;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
  }
  .people-badge {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    color: #20d8b5;
    padding: 0;
    & > .people-badge-name {
      flex: none;
      display: block;
      margin: 5px 3px 0;
      padding: 2px 6px 3px;
      line-height: 1;
      background: rgba(32, 216, 181, 0.1);
      border: 1px solid #20d8b5;
      border-radius: 100px;
      font-size: 12px;
    }
  }
  .load-more {
    padding: 0 0 15px;
    text-align: center;
    color: #1bedbd;
    cursor: pointer;
  }
}
</style>
